<template>
  <div>
    <el-container
      style="
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        overflow: hidden;
      "
    >
      <!--侧边布局-->
      <el-aside width="200px" heigth="100%" style="background-color: #545c64">
        <el-menu
          style="height: 100%"
          @select="slideSelect"
          background-color="#222832"
          text-color="#fff"
          default-active="/"
          router
        >
        <!-- 最开始的 -->
           <!-- v-if="!route.hidden" -->
          <!-- <el-menu-item
            :index="index | numToString"
            v-for="(item, index) in slideMenus"
            :key="index"
          >
            <i :class="item.icon"></i>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item> -->
          <!-- 新的 -->
          <el-submenu
            v-for="route in getRouterList"
            :key="route.path"
            :index="route.path"
        
          >
            <span slot="title">{{ route.name }}</span>
            <template v-for="(item, index) in route.children">
              <el-menu-item
                :key="route.path + '/' + item.path"
                :index="item.path"
                @click="handleClick(index)"
              >
                <i :class="item.meta.icon"></i>
                <span slot="title">{{ item.meta.title }}</span>
              </el-menu-item>
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container style="height: 100%">
        <!--头部布局-->
        <el-header
          class="d-flex align-items-center"
          style="background: #545c64"
        >
          <a class="h5 text-light mb-0 mr-auto">大盘数据</a>
          <el-menu
            :default-active="navBar.active"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item
              :index="index | numToString()"
              v-for="(item, index) in navBar.list"
              :key="index"
            >
              {{ item.name }}
            </el-menu-item>
            <!--用户信息管理-->
            <el-submenu index="100">
              <template slot="title">
                <el-avatar
                  size="small"
                  src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                ></el-avatar>
            {{getUsername}}
              </template>
              <el-menu-item index="2-1">修改</el-menu-item>
              <el-menu-item index="2-2">退出</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-header>
        <!--主体布局-->
        <el-main>
          <div class="border-bottom" style="padding: 20px; margin: -20px">
            <router-view> </router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
    import common from '@/common/mixins/common'

    export default {
        name: 'layout',
        mixins: [common],
        data() {
            return {
                navBar: [],
            }
        },
        computed: {
            slideMenuActive() {
                return this.navBar.list[this.navBar.active].subActive || '0'
            },
            slideMenus() {
              
                return this.navBar.list[this.navBar.active].submenu || []
            },
            // 排除路由中hidden为ture 不显示
            getRouterList(){
                return this.$router.options.routes.filter((index)=>{return !index.hidden})
            },
            // 获取用户姓名
            getUsername(){
            
            return localStorage.getItem("user")||"admin"
          }
        },
        methods: {
            // 获取头部菜单索引
            handleSelect(key) {
                this.navBar.active = key
                console.log('获取头部菜单索引', key)
            },
            // 获取左侧导航菜单索引
            slideSelect(key) {
                this.navBar.list[this.navBar.active].subActive = key
                console.log('获取左侧导航菜单索引',"this.navBar.list[this.navBar.active].submenu",this.navBar.list)
            },
            handleClick(index){
              console.log(this.navBar.list[index]);
            }
        },
        created() {
            // 初始化菜单
            this.navBar = this.$conf.navBar
        },
        watch: {
            '$route'(to, from) {
                // 获取点击后的路径
                console.log('获取点击后的路径', to)
                // 获取点击前的路径
                console.log('获取点击前的路径', from)
            }
        }
    }
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}
</style>

